<style scoped>
.tableBox {
  width: 100%;
  height: 100%;
  color: #333333;
  text-align: center;
}
.th_box {
  background-color: #eef0f4;
  color: #333333;
  padding: 0.7vh 0.8vh;
  border: 1px solid #dedede;
  border-right: none;
  /* width:5%;  */
  /* min-width: 120px; */
}
table {
  width: 100%;
  /* height: 100%;*/
}
td {
  border: 1px solid #dedede;
  border-right: none;
  padding: 0.7vh 0.5vh;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
tr > td:last-child,
tr > th:last-child {
  border-right: 1px solid #dedede;
}
.tr_box {
  background-color: #f8f8f8;
}

.numState{
  padding: .4vh .7vh;
}
</style>
<template>
  <div class="tableBox">
    <table>
      <tr>
        <th
          class="th_box"
          v-for="(item, i) in columns"
          :key="i"
          :style="{ width: item.width + 'px' }"
        >
          {{ item.title }}
        </th>
      </tr>
      <tr
        :class="{ tr_box: trBackgroundColor ? (trIndex + 1) % 2 == 0 : false }"
        v-for="(trItem, trIndex) in data"
        :key="trIndex"
      >
        <td v-for="(item, i) in columns" :key="i" :title="trItem[item.feild]">
         <i class="numState"  :style="{color:item.type=='state'?getColors(trItem[item.feild]):'',backgroundColor:item.type=='state'?getBgc(trItem[item.feild]):''}">{{ item.type == "index" ? i + 1 :trItem[item.feild]}}</i>
        </td>
      </tr>
      <!-- <tr v-else><td>weeeeee</td><td>weeeeee</td></tr> -->
    </table>
  </div>
</template>
<script>
export default {
  name: "zctxTable",
  props: {
    columns: Array,
    data: Array,
    trBackgroundColor: {
      type: String,
      default: false,
    },
  },
  data() {},
  methods:{
    getColors(num){
       var color=""
           if(num=="进行中"){
            color="#1492FF"
           }else if(num=="已完成"||num=="优秀"){
             color="#29AF65"
           }else if(num=="合格"||num=="未完成"){
             color="#FF8420"
           }else if(num=="超时"||num=="不合格"){
             color="#DE2B2B"
           }
        return color
    },
     getBgc(num){
          var color=""
           if(num=="进行中"){
            color="#E4F2FF"
           }else if(num=="已完成"||num=="优秀"){
             color="#EBF6ED"
           }else if(num=="合格"||num=="未完成"){
             color="#F6EFEB"
           }else if(num=="超时"||num=="不合格"){
             color="rgba(222, 43, 43,0.01)"
           }
        return color
    }
  }
};
</script>